<template>
  <view>
    <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 30rpx' }"
      :head-style="{ padding: '28rpx 30rpx 10rpx' }" :head-border-bottom="false">
      <view slot="head">
        <view class="card-row u-flex head">
          <u-section title="本年岗前培训达标趋势" color="#014833" font-size="32" :right="false"></u-section>
        </view>
      </view>
      <view slot="body">
        <view class="card-row u-p-t-10 u-p-b-20">
          <view class="body-cont w-100p">
            <div style="margin-left: 30px;">人</div>
            <view class="charts-box u-m-t-10">
              <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />

            </view>
          </view>

          <view class="closeicon">
            <u-image src="/static/image/icon-hp.png" width="50rpx" height="50rpx" @click="goPage"></u-image>
          </view>
        </view>
      </view>
    </u-card>
  </view>
</template>
<script>
export default {
  watch: {
    'customerNo': {
      immediate: true,
      handler: function (newval) {

        if (newval) {
          this.getServerData();
        }
      },
    },
  },
  props: {
    customerNo: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      }
    };
  },
  created () {

  },
  methods: {
    goPage () {
      uni.navigateTo({
        url: `/pages/practitioner/training/components/trend/bigChart?customerNo=${this.customerNo}`
      })
    },
    getServerData () {
      this.$get(`/train/trainCompleteTrend?customerNo=${this.customerNo}`).then(result => {
        if (result.body) {
          const arr = result.body

          let res = {
            categories: arr.map(el => el.month),
            series: [
              {
                name: "入职人数",
                data: arr.map(el => el.entryCount)
              },
              {
                name: "参与培训人数",
                data: arr.map(el => el.trainPeopleCount)
              },
              {
                name: "达标人数",
                data: arr.map(el => el.completedCount)
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.body-cont {
  box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
  border-radius: 12rpx;
  padding: 20rpx;

  h4 {
    color: #333;
    font-size: 30rpx;
  }
}

.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 100%;
}

.closeicon {
  position: absolute;
  right: 1em;
  top: 0.5em;
}
</style>